<template>
  <div class="sthj">
    <tabbar></tabbar>

    <!-- 头部展示卫星图 -->
    <div class="header">
      <img src="@/assets/sthj/img/yzb2.png" alt="" class="yzb" />
      <div class="wxt">
        <!-- 高德地图 -->
        <div class="dt" v-if="isRefresh">
          <el-amap
            :vid="'amapDemo'"
            :center="center"
            :zoom="zoom"
            :plugin="plugin"
            :amap-manager="amapManager"
          >
            <div v-if="isKq">
              <!--空气 -->
              <el-amap-marker
                v-for="(item, index) in dian"
                :key="index"
                :position="item.jw"
                :events="item.events"
                :icon="dianIcon"
              />
            </div>

            <!-- 水质 -->
            <div v-if="isSz">
              <el-amap-marker
                v-for="(item, index) in sz"
                :key="index"
                :position="item.jw"
                :events="item.events"
                :icon="require('../../assets/sthj/img/blue.png')"
              />
            </div>

            <!-- 多边形 -->
            <el-amap-polygon
              strokeColor="#0050E7"
              strokeWeight="5"
              strokeOpacity="1"
              fillColor="#c9ebf7"
              fillOpacity="0.2"
              ref="map"
              v-for="(polygon, index) in polygons"
              :key="index"
              :path="polygon.Ce.path"
            />

            <!-- 信息窗体 -->
            <el-amap-info-window
              v-if="window"
              :position="window.jw"
              :visible="window.visible"
              :offset="window.offset"
              :close-when-click-map="true"
              :is-custom="true"
            >
              <div class="sy-widow col999">
                空气质量：{{
                  window.type == 0
                    ? "优"
                    : window.type == 1
                    ? "良"
                    : window.type == 2
                    ? "差"
                    : ""
                }}
              </div>
            </el-amap-info-window>
            <!-- 信息窗体 -->
            <el-amap-info-window
              v-if="window2"
              :position="window2.jw"
              :visible="window2.visible"
              :offset="window2.offset"
              :close-when-click-map="true"
              :is-custom="true"
            >
              <div class="sy-widow col999">
                <div class="sy-widow col999">监测点{{ window2.num }}</div>
              </div>
            </el-amap-info-window>
          </el-amap>
        </div>

        <div class="selectSituation">
          <p
            v-for="(item, index) in selectSituationList"
            :key="index"
            :class="{ selectActive: selectIndex == index }"
            @click="selectChange(index)"
          >
            {{ item }}
          </p>
        </div>
        <div class="situationList">
          <p><span style="background: #00e500"></span>优</p>
          <p><span style="background: #edc24b"></span>良</p>
          <p><span style="background: #ff7e00"></span>轻度污染</p>
          <p><span style="background: #ff2600"></span>中度污染</p>
          <p><span style="background: #991200"></span>重度污染</p>
          <p><span style="background: #7e0d01"></span>严重污染</p>
          <p style="margin-top: 43px">
            <img src="@/assets/sthj/img/green.png" alt="" />监测点
          </p>
        </div>
      </div>

      <img src="@/assets/sthj/img/yzb.png" alt="" class="yzb" />
    </div>
    <!-- 分割线 -->
    <p style="width: 100%; height: 6px; background: #0cb06d"></p>

    <!-- 各个质量报告 -->
    <div class="report">
      <div class="reportList">
        <div
          class="reportListItem"
          v-for="(item, index) in reportList"
          :key="index"
          :style="{ background: 'url(' + item.imgurl + ')' }"
          @click="$router.push({ path: item.path })"
        >
          <img :src="item.iconurl" alt="" />
          <p
            style="
              width: 200px;
              border: 1px solid #ffffff;
              margin: 7px 0px 17px 0px !important;
            "
          ></p>
          <p class="reportTitle">{{ item.title }}</p>
        </div>
      </div>

      <!-- 实时质量报告列表 -->
      <div class="reportTable">
        <!-- 实时空气质量报告列表 -->
        <div class="TableList">
          <p style="background: #1ab69d" class="fgLine"></p>
          <div class="tableTip">
            <p class="tableTitle">{{ reportAirTableList.title }}</p>
            <p class="updateTime">{{ reportAirTableList.updateTime }}</p>
          </div>

          <div class="list">
            <div class="listTitle">
              <p>城镇</p>
              <p>AQI</p>
              <p>首要污染物</p>
              <p>空气质量</p>
            </div>
            <div class="allContent">
              <div
                class="listContent"
                v-for="(item, index) in reportAirTableList.tableData"
                :key="index"
              >
                <p>{{ item.town }}</p>
                <p>{{ item.AQL }}</p>
                <p>{{ item.pollute }}</p>
                <p>
                  {{ item.quality }}
                  <span
                    class="block"
                    :style="{
                      background:
                        item.quality == '优'
                          ? '#00E500'
                          : item.quality == '良'
                          ? '#0BC588'
                          : item.quality == '差'
                          ? '#A6C50B'
                          : '',
                    }"
                  ></span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 实时水质量报告列表 -->
        <div class="TableList">
          <p style="background: #1ab69d" class="fgLine"></p>
          <div class="tableTip">
            <p class="tableTitle">{{ reportWaterTableList.title }}</p>
            <p class="updateTime">{{ reportWaterTableList.updateTime }}</p>
          </div>

          <div class="list">
            <div class="listTitle">
              <p>城镇</p>
              <p>pH值</p>
              <p>温度 (°C)</p>
              <p>水质类别</p>
            </div>
            <div class="allContent">
              <div
                class="listContent"
                v-for="(item, index) in reportWaterTableList.tableData"
                :key="index"
              >
                <p>{{ item.town }}</p>
                <p>{{ item.pH }}</p>
                <p>{{ item.temperature }}</p>
                <p class="level">
                  <span>
                    {{ item.type }}
                  </span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新闻通报等 -->
    <Article :articleContent="articleContent"></Article>
    <Footer></Footer>
  </div>
</template>

<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager(); //
import Article from "../../components/sthj/article.vue";
import tabbar from "../../components/sthj/tabbar.vue";
import Footer from "../../components/sthj/footer.vue";
import { article } from "@/components/mixins/ArticleTitle.js";
export default {
  components: { tabbar, Article, Footer },
  mixins: [article],
  name: "HcdcpSthj",
  data() {
    return {
      // 高德
      amapManager,
      zoom: 10,
      center: [114.364022, 25.190073],
      plugin: [
        {
          pName: "MapType",
          defaultType: 1,
        },
      ],
      // 画行政区
      district: null,
      polygons: [],
      //卫星图各个情况选择列表
      selectSituationList: ["空气质量情况", "水质量情况", "土壤质量情况"],
      selectIndex: 0,
      //报告
      reportList: [
        {
          title: "生态环境质量报告",
          imgurl: require("../../assets/sthj/img/1.png"),
          iconurl: require("../../assets/sthj/img/lh.png"),
          path: "/sthjzlbg",
        },
        {
          title: "空气质量报告",
          imgurl: require("../../assets/sthj/img/2.png"),
          iconurl: require("../../assets/sthj/img/yz.png"),
          path: "/kqzlzlbg",
        },
        {
          title: "水环境质量报告",
          imgurl: require("../../assets/sthj/img/3.png"),
          iconurl: require("../../assets/sthj/img/huo.png"),
          path: "/shjzlbg",
        },
        {
          title: "土地环境质量报告",
          imgurl: require("../../assets/sthj/img/4.png"),
          iconurl: require("../../assets/sthj/img/shu.png"),
          path: "/tdhjzlbg",
        },
      ],
      //实时空气质量报告
      reportAirTableList: {
        title: "实时空气质量",
        updateTime: "2020/10/10 12:22:32",
        tableData: [
          { town: "雄州街道", AQL: "42", pollute: "PM2.5", quality: "优" },
          { town: "黄坑镇", AQL: "45", pollute: "PM10", quality: "差" },
          { town: "邓坊镇", AQL: "45", pollute: "PM2.5", quality: "优" },
          { town: "油山镇", AQL: "45", pollute: "PM10", quality: "良" },
          { town: "南亩镇", AQL: "66", pollute: "PM2.5", quality: "优" },
          { town: "水口镇", AQL: "45", pollute: "PM10", quality: "优" },
          { town: "珠玑镇", AQL: "45", pollute: "PM2.5", quality: "良" },
          { town: "百顺镇", AQL: "52", pollute: "PM10", quality: "优" },
          { town: "帽子峰镇", AQL: "45", pollute: "PM10", quality: "差" },
          { town: "主田镇", AQL: "49", pollute: "PM2.5", quality: "优" },
        ],
      },
      //实时水质量报告
      reportWaterTableList: {
        title: "实时水质质量",
        updateTime: "2020/10/10 12:22:32",
        tableData: [
          { town: "雄州街道", pH: "6.32", temperature: "30", type: "二级" },
          { town: "黄坑镇", pH: "4.51", temperature: "41", type: "二级" },
          { town: "邓坊镇", pH: "7.65", temperature: "33", type: "二级" },
          { town: "油山镇", pH: "8.22", temperature: "50", type: "二级" },
          { town: "南亩镇", pH: "5.44", temperature: "45", type: "二级" },
          { town: "水口镇", pH: "4.91", temperature: "48", type: "二级" },
          { town: "珠玑镇", pH: "6.55", temperature: "20", type: "二级" },
          { town: "百顺镇", pH: "7.71", temperature: "25", type: "二级" },
          { town: "帽子峰镇", pH: "6.34", temperature: "44", type: "二级" },
          { town: "主田镇", pH: "7.21", temperature: "66", type: "二级" },
        ],
      },
      //获取新闻的范围
      minArticle: 0,
      maxArticle: 5,
      isRefresh: true,
      // 经纬度
      jwd: [
        {
          one: [
            [113.970006, 25.165228],
            [114.001181, 25.134034],
            [114.00592, 25.130498],
            [114.005338, 25.125486],
            [114.007451, 25.124068],
            [114.014515, 25.125069],
            [114.024055, 25.133029],
            [114.03758, 25.145866],
            [114.048634, 25.149177],
            [114.060375, 25.148447],
            [114.076649, 25.15037],
            [114.098245, 25.141727],
            [114.109729, 25.147738],
            [114.13073, 25.163289],
            [114.137312, 25.180703],
            [114.141549, 25.185079],
            [114.161578, 25.195357],
            [114.1764, 25.196457],
            [114.189848, 25.201907],
            [114.215035, 25.203254],
            [114.215284, 25.207811],
            [114.197844, 25.227175],
            [114.200223, 25.246105],
            [114.19299, 25.249507],
            [114.175777, 25.250101],
            [114.159203, 25.254393],
            [114.148028, 25.266703],
            [114.133917, 25.262137],
            [114.126295, 25.263561],
            [114.124785, 25.272618],
            [114.108056, 25.271609],
            [114.043262, 25.244207],
            [114.037957, 25.244673],
            [114.018403, 25.25197],
            [114.010601, 25.252203],
            [113.99782, 25.24312],
            [113.992788, 25.239937],
            [113.9881, 25.238928],
            [113.989618, 25.221342],
            [113.983583, 25.205617],
            [113.970853, 25.187715],
            [113.96911, 25.176647],
          ],
          two: [
            [114.34614, 25.097779],
            [114.354095, 25.105416],
            [114.357243, 25.114917],
            [114.358046, 25.134539],
            [114.367002, 25.145271],
            [114.371151, 25.157246],
            [114.376016, 25.182434],
            [114.366461, 25.202025],
            [114.347293, 25.221614],
            [114.292595, 25.227282],
            [114.271384, 25.218586],
            [114.244499, 25.217227],
            [114.233408, 25.203443],
            [114.223241, 25.192958],
            [114.218013, 25.19125],
            [114.214159, 25.198162],
            [114.210991, 25.198239],
            [114.207652, 25.194007],
            [114.203236, 25.185832],
            [114.195043, 25.178278],
            [114.19335, 25.171821],
            [114.184103, 25.166296],
            [114.170417, 25.163325],
            [114.160898, 25.161732],
            [114.156682, 25.159596],
            [114.155689, 25.157051],
            [114.15916, 25.153264],
            [114.176917, 25.144135],
            [114.205364, 25.143766],
            [114.218215, 25.119026],
            [114.21022, 25.073074],
            [114.212918, 25.071862],
            [114.225425, 25.073899],
            [114.22979, 25.070253],
            [114.231286, 25.067031],
            [114.246453, 25.060443],
            [114.275394, 25.06074],
            [114.292095, 25.060111],
            [114.299073, 25.059175],
            [114.301188, 25.047043],
            [114.303304, 25.043931],
            [114.328054, 25.062253],
          ],
          three: [
            [114.375666, 25.090589],
            [114.374354, 25.079124],
            [114.395077, 25.067074],
            [114.4376, 25.053156],
            [114.453639, 25.056053],
            [114.464919, 25.058745],
            [114.473797, 25.063614],
            [114.481368, 25.060917],
            [114.48894, 25.06133],
            [114.505456, 25.071486],
            [114.527466, 25.077598],
            [114.532634, 25.084852],
            [114.5148, 25.101433],
            [114.50255, 25.127101],
            [114.477253, 25.144372],
            [114.467921, 25.143772],
            [114.463396, 25.146279],
            [114.466923, 25.156309],
            [114.44102, 25.162694],
            [114.430411, 25.163655],
            [114.422583, 25.158741],
            [114.412763, 25.160722],
            [114.408573, 25.170278],
            [114.405449, 25.177074],
            [114.399577, 25.177036],
            [114.395731, 25.16515],
            [114.396654, 25.138269],
            [114.38865, 25.098945],
          ],
          four: [
            [114.686391, 25.133723],
            [114.681665, 25.144407],
            [114.658486, 25.15711],
            [114.656982, 25.171938],
            [114.676487, 25.184633],
            [114.677452, 25.199191],
            [114.650971, 25.212305],
            [114.636164, 25.213616],
            [114.613974, 25.207704],
            [114.593156, 25.19325],
            [114.571778, 25.170549],
            [114.557695, 25.172472],
            [114.545844, 25.168025],
            [114.533114, 25.147748],
            [114.534605, 25.135627],
            [114.552318, 25.117287],
            [114.583593, 25.106096],
            [114.592463, 25.099723],
            [114.593093, 25.095836],
            [114.597787, 25.092416],
            [114.630891, 25.091172],
            [114.635906, 25.101743],
            [114.63783, 25.113557],
            [114.640595, 25.114645],
            [114.650217, 25.110215],
            [114.662586, 25.11107],
            [114.684079, 25.12024],
          ],
          five: [
            [114.612644, 25.304009],
            [114.601805, 25.324842],
            [114.585473, 25.32395],
            [114.555408, 25.349123],
            [114.533044, 25.342995],
            [114.513622, 25.344895],
            [114.487137, 25.3342],
            [114.477132, 25.313573],
            [114.446871, 25.305047],
            [114.436522, 25.282242],
            [114.421518, 25.278905],
            [114.403767, 25.250728],
            [114.410401, 25.246478],
            [114.419782, 25.24968],
            [114.425498, 25.23559],
            [114.417704, 25.210509],
            [114.422998, 25.204763],
            [114.452425, 25.215557],
            [114.468118, 25.212684],
            [114.495729, 25.214703],
            [114.52334, 25.204297],
            [114.538076, 25.209422],
            [114.551439, 25.233182],
            [114.585401, 25.273704],
            [114.601009, 25.269746],
            [114.61387, 25.276964],
          ],
        },
        {
          one: [
            [114.147154, 25.297859],
            [114.173525, 25.285035],
            [114.173976, 25.268173],
            [114.185273, 25.26665],
            [114.192982, 25.244774],
            [114.204046, 25.239735],
            [114.213393, 25.241217],
            [114.225899, 25.237456],
            [114.224672, 25.224998],
            [114.25449, 25.216231],
            [114.271554, 25.195277],
            [114.29195, 25.178219],
            [114.297368, 25.167975],
            [114.319952, 25.164567],
            [114.327087, 25.154632],
            [114.321862, 25.140346],
            [114.302336, 25.111788],
          ],
          two: [
            [114.389863, 25.263286],
            [114.400945, 25.241335],
            [114.411808, 25.23688],
            [114.41752, 25.22466],
            [114.422475, 25.223435],
            [114.423236, 25.215058],
            [114.42743, 25.211961],
            [114.426034, 25.201572],
            [114.427384, 25.190872],
            [114.432292, 25.188711],
            [114.43308, 25.181735],
            [114.439806, 25.176792],
            [114.441039, 25.169829],
            [114.449139, 25.165041],
            [114.455038, 25.161446],
            [114.45496, 25.156763],
            [114.46089, 25.154565],
            [114.456434, 25.149105],
            [114.457382, 25.146802],
            [114.460047, 25.146829],
            [114.466414, 25.154088],
            [114.471572, 25.1489],
            [114.475095, 25.148714],
            [114.47673, 25.150548],
          ],
          three: [
            [114.440533, 25.294221],
            [114.443663, 25.287331],
            [114.4454, 25.282955],
            [114.444905, 25.277958],
            [114.447973, 25.268536],
            [114.450965, 25.265571],
            [114.456361, 25.265245],
            [114.467207, 25.251413],
            [114.469412, 25.242478],
            [114.471887, 25.242125],
            [114.474191, 25.238045],
            [114.481009, 25.232622],
            [114.478901, 25.223783],
            [114.478766, 25.205235],
            [114.468228, 25.198446],
            [114.468452, 25.186818],
            [114.459122, 25.182713],
            [114.454942, 25.17519],
          ],
        },
        {
          one: [
            [114.020584, 25.117404],
            [114.047694, 25.162218],
            [114.094718, 25.155439],
            [114.135206, 25.170472],
            [114.165394, 25.137647],
            [114.179961, 25.125952],
            [114.203454, 25.138502],
            [114.206066, 25.165723],
            [114.232091, 25.191138],
            [114.26361, 25.210335],
            [114.318272, 25.27157],
            [114.310866, 25.279758],
            [114.294822, 25.282438],
            [114.282211, 25.296292],
            [114.274155, 25.297305],
            [114.270048, 25.288229],
            [114.255984, 25.288776],
            [114.232687, 25.292205],
            [114.213559, 25.296579],
            [114.201397, 25.292913],
            [114.201766, 25.306628],
            [114.191492, 25.306066],
            [114.17575, 25.295629],
            [114.160008, 25.300091],
            [114.13204, 25.283745],
            [114.102698, 25.276091],
            [114.053629, 25.244634],
            [114.037677, 25.24148],
            [114.023785, 25.245469],
            [114.027654, 25.251577],
            [114.026373, 25.258307],
            [114.018489, 25.260587],
            [114.012837, 25.257123],
            [114.011476, 25.249933],
            [113.996052, 25.251078],
            [113.985435, 25.252223],
            [113.978937, 25.250883],
            [113.98884, 25.235512],
            [113.98501, 25.220138],
            [113.962495, 25.198472],
            [113.944101, 25.170588],
            [113.971712, 25.140833],
            [114.006189, 25.119774],
          ],
          two: [
            [114.445681, 25.293824],
            [114.464152, 25.318441],
            [114.451724, 25.318538],
            [114.443278, 25.316724],
            [114.440326, 25.320187],
            [114.445785, 25.332726],
            [114.456737, 25.339058],
            [114.456874, 25.351595],
            [114.462505, 25.359787],
            [114.475345, 25.362706],
            [114.486572, 25.363234],
            [114.496425, 25.369346],
            [114.511343, 25.380421],
            [114.517334, 25.392736],
            [114.527101, 25.395746],
            [114.540989, 25.402477],
            [114.552294, 25.402826],
            [114.560853, 25.398212],
            [114.565133, 25.391874],
            [114.567352, 25.383053],
            [114.579105, 25.374921],
            [114.592231, 25.371751],
            [114.597289, 25.355241],
            [114.609557, 25.346796],
            [114.608945, 25.341374],
            [114.588421, 25.336573],
            [114.564538, 25.340624],
            [114.539024, 25.318841],
            [114.534969, 25.311487],
            [114.538015, 25.306323],
            [114.544494, 25.304106],
            [114.544407, 25.295794],
            [114.535394, 25.286239],
            [114.520456, 25.281097],
            [114.504833, 25.281543],
            [114.487318, 25.293145],
            [114.473236, 25.292951],
            [114.445931, 25.281078],
            [114.439912, 25.28131],
          ],
          three: [
            [114.212583, 25.081514],
            [114.291455, 25.019289],
            [114.303597, 24.990499],
            [114.317907, 24.984192],
            [114.338308, 24.999419],
            [114.344975, 25.0246],
            [114.418048, 25.056286],
            [114.50892, 25.103468],
            [114.571639, 25.17052],
            [114.670064, 25.203991],
            [114.72729, 25.250495],
            [114.717395, 25.286937],
            [114.693081, 25.305988],
            [114.679293, 25.300847],
            [114.670312, 25.285773],
            [114.646911, 25.275043],
            [114.605684, 25.282096],
            [114.558292, 25.282518],
            [114.504033, 25.26928],
            [114.427019, 25.245954],
            [114.397823, 25.211048],
            [114.354894, 25.18856],
            [114.278649, 25.173404],
            [114.238452, 25.134316],
            [114.225142, 25.139461],
            [114.215951, 25.137147],
            [114.202376, 25.108894],
          ],
          four: [
            [114.380395, 24.968768],
            [114.398035, 24.970088],
            [114.436725, 24.980396],
            [114.462936, 25.010131],
            [114.510433, 25.02555],
            [114.533172, 25.046825],
            [114.531583, 25.048644],
            [114.536431, 25.049997],
            [114.536386, 25.051816],
            [114.533767, 25.052857],
            [114.540964, 25.061811],
            [114.541596, 25.063845],
            [114.540682, 25.065567],
            [114.535379, 25.065358],
            [114.532995, 25.063128],
            [114.531945, 25.062861],
            [114.531755, 25.063682],
            [114.53236, 25.066879],
            [114.538537, 25.074926],
            [114.538146, 25.077802],
            [114.536202, 25.078672],
            [114.534259, 25.078765],
            [114.531059, 25.077706],
            [114.519273, 25.075925],
            [114.508345, 25.075077],
            [114.494042, 25.071516],
            [114.491014, 25.072012],
            [114.482211, 25.077202],
            [114.472035, 25.076173],
            [114.452616, 25.069567],
            [114.443899, 25.057264],
            [114.4519, 25.054222],
            [114.464707, 25.049625],
            [114.458737, 25.039964],
            [114.438347, 25.034657],
            [114.407313, 25.018306],
            [114.369071, 25.018132],
            [114.359533, 24.993514],
          ],
          five: [
            [114.569557, 25.079473],
            [114.587901, 25.081767],
            [114.592426, 25.085926],
            [114.602413, 25.08886],
            [114.608623, 25.093349],
            [114.602684, 25.100996],
            [114.595372, 25.101802],
            [114.589845, 25.113052],
            [114.580027, 25.120027],
            [114.572457, 25.121882],
            [114.564887, 25.120629],
            [114.558211, 25.115228],
            [114.546376, 25.115714],
            [114.541064, 25.111226],
            [114.544071, 25.106057],
            [114.538879, 25.103007],
            [114.536434, 25.099956],
            [114.534552, 25.094593],
            [114.540562, 25.090162],
            [114.550951, 25.089618],
            [114.551767, 25.087325],
            [114.549494, 25.084565],
            [114.551214, 25.079823],
          ],
          six: [
            [114.660593, 25.104017],
            [114.667147, 25.107534],
            [114.681925, 25.10937],
            [114.68503, 25.113693],
            [114.70978, 25.114878],
            [114.714367, 25.12739],
            [114.72696, 25.137453],
            [114.72582, 25.141299],
            [114.709917, 25.14701],
            [114.702941, 25.146816],
            [114.699987, 25.149885],
            [114.706236, 25.152507],
            [114.702527, 25.158858],
            [114.682408, 25.168607],
            [114.676125, 25.184822],
            [114.669155, 25.187677],
            [114.63908, 25.18624],
            [114.612781, 25.17455],
            [114.607081, 25.160373],
            [114.572302, 25.144893],
            [114.569504, 25.141658],
            [114.570139, 25.136559],
            [114.629598, 25.11449],
            [114.633235, 25.109049],
            [114.653695, 25.103298],
          ],
          seven: [
            [114.547275, 25.232658],
            [114.552601, 25.235813],
            [114.556554, 25.243004],
            [114.566863, 25.246982],
            [114.574425, 25.254998],
            [114.579422, 25.254726],
            [114.584076, 25.258491],
            [114.590638, 25.25622],
            [114.594453, 25.250224],
            [114.600414, 25.247642],
            [114.604831, 25.239782],
            [114.603968, 25.235337],
            [114.597613, 25.232756],
            [114.592076, 25.225998],
            [114.587913, 25.222346],
            [114.585423, 25.206345],
            [114.588426, 25.200593],
            [114.589369, 25.193599],
            [114.586275, 25.189851],
            [114.581155, 25.189182],
            [114.576034, 25.190065],
            [114.567854, 25.203326],
            [114.560931, 25.19986],
            [114.555553, 25.191579],
            [114.551463, 25.184929],
            [114.545999, 25.183871],
            [114.543542, 25.188026],
            [114.547477, 25.199394],
            [114.543608, 25.198555],
            [114.540426, 25.200821],
            [114.541786, 25.210791],
            [114.547609, 25.218896],
          ],
        },
      ],
      sz: [],
      isSz: false,
      dian: [],
      isKq: false,
      dianIcon: require("../../assets/sthj/img/icon.png"),
      // 信息窗体
      windows: [],
      window: {
        type: 0, //0 优 1良 2差
        jw: [114.098741, 25.243776],
        offset: [20, -30],
        visible: false,
      },
      windows2: [],
      window2: {
        num: 1,
        jw: [114.156566, 25.297585],
        offset: [5, -30],
        visible: false,
      },
    };
  },

  created() {},

  async mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.drawBounds();
        this.getInit();
      }, 1000);
    });
  },

  methods: {
    selectChange(index) {
      this.selectIndex = index;
      this.isRefresh = false;
      this.$nextTick(() => {
        setTimeout(() => {
          this.isRefresh = true;
        }, 100);
        this.getInit();
      });
    },
    getInit() {
      if (this.selectIndex == 0) {
        setTimeout(() => {
          this.point();
          this.area(this.jwd[0].one, "#55D959");
          this.area(this.jwd[0].two, "#55D959");
          this.area(this.jwd[0].three, "#C2A439");
          this.area(this.jwd[0].four, "#55D959");
          this.area(this.jwd[0].five, "#700E0E");
          this.window.visible = true;
          this.window2.visible = false;
          this.isKq = true;
        }, 1000);
        this.isSz = false;
      } else if (this.selectIndex == 1) {
        this.isSz = true;
        this.isKq = false;
        this.window.visible = false;
        this.window2.visible = true;
        this.dian = [];
        this.$nextTick(() => {
          setTimeout(() => {
            this.line(this.jwd[1].one, "#0C8BCC");
            this.line(this.jwd[1].two, "#50C4FF");
            this.line(this.jwd[1].three, "#1D53E9 ");
            this.point2();
          }, 1000);
        });
      } else if (this.selectIndex == 2) {
        setTimeout(() => {
          this.drawBounds();
          this.area(this.jwd[2].one, "#55D959");
          this.area(this.jwd[2].two, "#55D959");
          this.area(this.jwd[2].three, "#E99E54");
          this.area(this.jwd[2].four, "#55D959");
          this.area(this.jwd[2].five, "#700E0E");
          this.area(this.jwd[2].six, "#55D959");
          this.area(this.jwd[2].seven, "#C2E500 ");
        }, 1000);
        this.window.visible = false;
        this.window2.visible = false;
        this.dian = [];
        this.isSz = false;
        this.isKq = false;
      }
    },
    // 画行政区
    drawBounds() {
      let that = this;
      //加载行政区划插件
      if (!that.district) {
        //实例化DistrictSearch
        let opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "city", //查询行政级别为 市
        };
        that.district = new AMap.DistrictSearch(opts);
      }
      //行政区查询
      that.district.search("南雄市", (status, result) => {
        that.polygons = [];
        let bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (let i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            let polygon = new AMap.Polygon({
              path: bounds[i],
            });
            that.polygons.push(polygon);
          }
        }
        AMap.Polygon.bind(that.polygons);
        // that.$refs.map.$amap.setFitView(that.polygons); //视口自适应
      });
    },
    area(path, fillColor) {
      const map = amapManager.getMap();
      var polygon = new AMap.Polygon({
        // 这些就是图形的一些基本样式了，颜色 线条粗细 透明度之类的
        path,
        strokeColor: "#FFFFFF",
        strokeWeight: 2,
        strokeOpacity: 1,
        fillOpacity: 0.5,
        fillColor,
        zIndex: 50,
      });
      map.add(polygon);
      // 缩放地图到合适的视野级别
      // map.setFitView([polygon]);
    },
    point() {
      let markers = [];
      let windows = [];
      let that = this;
      let pointMarker = [
        {
          jw: [114.098741, 25.243776],
          type: 0, //0 优 1良 2差
        },
        {
          jw: [114.312367, 25.103962],
          type: 0, //0 优 1良 2差
        },
        {
          jw: [114.440066, 25.081879],
          type: 1, //0 优 1良 2差
        },
        {
          jw: [114.659346, 25.134169],
          type: 0, //0 优 1良 2差
        },
        {
          jw: [114.551159, 25.328544],
          type: 2, //0 优 1良 2差
        },
      ];
      pointMarker.forEach((item, index) => {
        markers.push({
          jw: item.jw,
          type: item.type,
          events: {
            mouseover() {
              that.windows.forEach((window) => {
                window.visible = false; //关闭窗体
              });
              that.window = that.windows[index];
              console.log(that.window);
              that.$nextTick(() => {
                that.window.visible = true; //点击点坐标，出现信息窗体
              });
            },
          },
        });
        windows.push({
          jw: item.jw,
          type: item.type,
          offset: [20, -30],
          visible: false, //初始是否显示
        });
      });
      //  加点
      this.dian = markers;
      //加弹窗
      this.windows = windows;
    },
    line(path, color) {
      const map = amapManager.getMap();
      let polyline = new AMap.Polyline({
        path,
        isOutline: true,
        outlineColor: color,
        borderWeight: 2,
        strokeColor: color,
        strokeOpacity: 1,
        strokeWeight: 2,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: "round",
        lineCap: "round",
        zIndex: 50,
      });

      polyline.setMap(map);
      // 缩放地图到合适的视野级别
      map.setFitView([polyline]);
    },
    point2() {
      let markers2 = [];
      let windows2 = [];
      let that = this;
      let pointMarker2 = [
        {
          jw: [114.156566, 25.297585],
          num: 1,
        },
        {
          jw: [114.192272, 25.256024],
          num: 2,
        },
        {
          jw: [114.286034, 25.11732],
          num: 3,
        },
        {
          jw: [114.389775, 25.26333],
          num: 4,
        },
        {
          jw: [114.440599, 25.294688],
          num: 5,
        },
        {
          jw: [114.449422, 25.164085],
          num: 6,
        },
        {
          jw: [114.449422, 25.164085],
          num: 7,
        },
      ];
      pointMarker2.forEach((item, index) => {
        markers2.push({
          jw: item.jw,
          num: item.num,
          events: {
            mouseover() {
              that.windows2.forEach((window) => {
                window.visible = false; //关闭窗体
              });
              that.window2 = that.windows2[index];
              that.$nextTick(() => {
                that.window2.visible = true; //点击点坐标，出现信息窗体
              });
            },
          },
        });
        windows2.push({
          jw: item.jw,
          num: item.num,
          offset: [5, -30],
          visible: false, //初始是否显示
        });
      });
      //  加点
      this.sz = markers2;
      //加弹窗
      this.windows2 = windows2;
    },
  },
};
</script>

<style lang="less" scoped>
.sy-widow {
  padding: 0 16px;
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: #cef3ff;
  border-radius: 4px;
  font-size: 16px;
}
.dt {
  width: 1200px;
  height: 560px;
}
.sthj {
  width: 100%;
  background-color: #fafafa;
}

//头部卫星图展示
.selectActive {
  color: rgba(255, 255, 255, 1) !important;
  background: url("../../assets/sthj/img/xxk.png");
  background-size: 146px 42px;
}
.header {
  width: 1920px;
  height: 650px;
  background: url("../../assets/sthj/img/yun.png");
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    height: 85%;
  }
  .wxt {
    width: 1200px;
    height: 85%;
    margin: 0 11px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .selectSituation {
      position: absolute;
      width: 140px;
      height: 200px;
      background: #000000;
      opacity: 0.6;
      top: 20px;
      left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        width: 100%;
        height: 42px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        line-height: 42px;
        color: rgba(255, 255, 255, 0.7);
        text-align: center;
        margin: 13px 0px;
        cursor: pointer;
      }
    }
    .situationList {
      width: 140px;
      height: 280px;
      background: #000000;
      opacity: 0.6;
      position: absolute;
      right: 30px;
      bottom: 30px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      p {
        margin: 12px 20px;
        color: white;
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          width: 24px;
          height: 12px;

          border-radius: 2px;
          margin-right: 12px;
        }
        img {
          vertical-align: middle;
          width: 12px;
          height: 18px;
          margin: 0 16px 0px 8px;
        }
      }
    }
  }
}

//实时报告
.report {
  width: 1200px;
  margin: 22px auto;
  .reportList {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .reportListItem {
      width: 290px;
      height: 180px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .reportTitle {
        font-size: 24px;
        font-family: PangMenZhengDao;
        color: #ffffff;
      }
    }
  }

  .reportTable {
    display: flex;
    width: 100%;
    height: 640px;
    justify-content: space-around;
    margin: 36px 0px;
    .TableList {
      width: 576px;
      height: 100%;
      background: white;
      border: 1px solid #aaaaaa;
      .fgLine {
        width: 100%;
        height: 4px;
      }
      .tableTip {
        width: 546px;
        height: 67px;
        margin: 0px 15px;
        display: flex;
        justify-content: space-between;
        p {
          height: 67px;
          line-height: 67px;
        }
        .tableTitle {
          font-size: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .updateTime {
          font-size: 16px;
          font-family: HelveticaNeue-Medium, HelveticaNeue;
          font-weight: 500;
          color: #aaaaaa;
        }
      }

      .list {
        width: 546px;
        height: 580px;
        margin: 0px auto;
        .listTitle {
          width: 546px;
          height: 48px;
          background: #eeeeee;
          display: flex;
          p {
            width: 25%;
            height: 100%;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
          }
        }
        .allContent {
          width: 100%;
          height: 500px;
          overflow: auto;
          .listContent {
            width: 100%;
            height: 48px;
            display: flex;
            p {
              width: 25%;
              line-height: 48px;
              text-align: center;
              border-bottom: 1px solid #aaaaaa;
              font-size: 16px;
              font-family: HelveticaNeue-Medium, HelveticaNeue;
              color: #333333;
              span {
                width: 24px;
                height: 8px;
                display: inline-block;
                border-radius: 2px;
              }
            }
            .level {
              span {
                display: inline-block;
                width: 60px;
                height: 30px;
                background: #cef3ff;
                border-radius: 4px;
                line-height: 30px;
              }
            }
            p:nth-child(2) {
              font-weight: 550;
            }
            p:nth-child(3) {
              font-weight: 550;
            }
          }
        }
      }
    }
  }
}
</style>